<template>
	<view class="page_wrapper">
		<view class="title_block">{{title}}</view>
		<view class="rank_list_block">
			<view class="rank_block" v-for="(rank, index) in rankList">
				<view class="rank">
					<template v-if="index === 0">
						<image src="@/static/images/rank_1.png" class="rank_icon"></image>
					</template>
					<template v-else-if="index === 1">
						<image src="@/static/images/rank_2.png" class="rank_icon"></image>
					</template>
					<template v-else-if="index === 2">
						<image src="@/static/images/rank_3.png" class="rank_icon"></image>
					</template>
					<template v-else>
						{{index + 1}}
					</template>
				</view>
				<view class="rank_mobile">{{rank.userName ? rank.userName: '新用户'}}</view>
				<view class="user_score">做题量 : {{rank.totalCount}} </view>
				<view>总用时 : {{parseTime(rank.useTime )}} </view>
			</view>
		</view>
		<view class="btns_block">
			<picker @change="bindPickerChange" :value="index" :range="levelArr">
				<view class="select_count">选择难度 : {{selectLevel}}</view>
			</picker>
			<view class="download_btn" @click="startCalcs()">开始口算</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	import {storageData} from '@/utils/storageData.js'
	export default {
		data() {
			return {
				title: '',
				levelArr: ['简单', '中等', '困难'],
				selectLevel: '简单',
				level: 'simple',
				rankList: [],
				levelMap: {
					'简单': 'simple',
					'中等': 'medium',
					'困难': 'difficult'
				}
			}
		},
		onShow() {
			const date = new Date()
			const month = date.getMonth() + 1
			this.title = month + '月做题排行榜'
			this.fetchData()
		},
		methods: {
			parseTime(d) {
				return utils.int2TimeTxt(d)
			},
			bindPickerChange(e) {
				const index = e.detail.value;
				this.selectLevel = this.levelArr[index]
				this.level = this.levelMap[this.selectLevel]
				this.fetchData()
			},
			fetchData() {
				uni.showLoading()
				request.get(
				  '/todayMathExamRanks/stat', {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.rankList = res
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// request.get(
				//   `/todayMathExamRanks/degreeLevel,${this.level}`, {}
				// ).then(res => {
				// 	uni.hideLoading()
				// 	console.log(res)
				// 	this.rankList = res.items
				// }).catch(err => {
				// 	uni.hideLoading()
				// 	console.log(err)
				// })
			},
			startCalcs() {
				// 根据难度获取今天的口算题
				uni.navigateTo({
					url: '/pages/mathCalcs/onlineTest?degreeLevel=' + this.level
				})
			}
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			console.log(userInfo)
			if (res.from === 'button') {
					 // 来自页面内分享按钮
					 console.log(res.target);
			}
			return {
				title: '萌芽学口算：今日排名',
				path: '/pages/todayMathExam/todayMathExam?shareUc=' + userInfo.userCode,
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '萌芽学口算：今日排名',
				path: '/pages/todayMathExam/todayMathExam?shareUc=' + userInfo.userCode,
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		display: flex;
		flex-direction: column;
		.title_block{
			font-size: 17px;
			font-weight: 500;
			color: #333333;
			height: 60px;
			letter-spacing: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #e2e2e2;
		}
		.rank_list_block{
			flex: 1;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			.rank_block{
				height: 60px;
				display: flex;
				align-items: center;
				padding-left: 10px;
				padding-right: 20px;
				border-bottom: 1px solid #e2e2e2;
				.rank{
					width: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
				}
				.rank_icon{
					width: 30px;
					height: 30px;
				}
				.rank_mobile{
					width: 90px;
				}
				.user_score{
					width: 100px;
				}
			}
		}
		.btns_block{
			height: 60px;
			padding-left: 20px;
			padding-right: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			.select_count{
				width: 120px;
				height: 40px;
				border-radius: 5px;
				border: 1px solid #e2e2e2;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 15px;
			}
			.download_btn{
				flex: 1;
				height: 40px;
				color: white;
				background-color: #67C23A;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
			}
		}
	}
</style>
